import { Popup, DatePickerView, Toast } from "antd-mobile";
import { useEffect, useState, useImperativeHandle, forwardRef, useMemo } from "react";
import dayjs from "dayjs";
import Styles from "./index.module.less";

export default forwardRef((props: any, ref: any) => {
    let { startTime, endTime, enterDate, max, min, filter, onlyEndTime, } = props;
    let nowDate = new Date();
    if (!max) {
        max = new Date(nowDate.getFullYear() + 10, nowDate.getMonth() - 1)
    }
    if (!min) {
        min = new Date(nowDate.getFullYear() - 10, nowDate.getMonth() - 1)
    }
    let dateFilter = {
        year: () => {
            return true
        },
        month: () => {
            return true
        },
    }
    if (filter) {
        dateFilter = filter
    }
    let [dateFilter1, setDateFilter1] = useState(dateFilter)
    let [dateFilter2, setDateFilter2] = useState(dateFilter)
    let [visible, setVisible] = useState(false);
    let showPicker = (status: any) => {
        setVisible(status)
    }
    let [tabs, setTabs] = useState(onlyEndTime ? 2 : 1);
    let clickTabs = (e: any) => {
        setTabs(e)
        if (e == 2) {
            let newfilter2: any = {
                year: (val: any, { date }: any) => {
                    return Number(dayjs(time1).format('YYYY')) == val ? true : false
                },
                month: () => {
                    return true
                },
            }
            setDateFilter2(newfilter2)
        }
    }
    let [time1, setTime1] = useState(startTime);
    let [time2, setTime2] = useState(endTime);
    let formatTime = (time: any, format: any = 'YYYY年MM月') => dayjs(time).format(format)
    let changeTime = (e: any, type: any) => {
        if (type == 'startTime') {
            setTime1(e)
        } else if (type == 'endTime') {
            setTime2(e)
        }
    }
    let labelRenderer = (type: any, data: any) => {
        let keys = {
            year: '年',
            month: '月',
        }
        return `${data}${keys[type]}`
    }
    let cancel = () => {
        showPicker(false)
    }
    let enter = () => {
        console.log('----', dayjs(time1).format("YYYY-MM"), dayjs(time2).format("YYYY-MM"), dayjs(min).format("YYYY-MM"), dayjs(max).format("YYYY-MM"));

        if (time1 > time2 && !onlyEndTime) {
            return Toast.show({
                content: '结束时间必须大于开始时间'
            })
        }
        enterDate([onlyEndTime ? min : time1, time2])
        showPicker(false)
    }
    useImperativeHandle(ref, () => {
        return {
            showPicker,
        }
    }, [])
    return (
        <>
            <Popup
                visible={visible}
                destroyOnClose
                forceRender
                closeOnMaskClick
                onClose={() => {
                    showPicker(false)
                }}
                bodyStyle={{
                    borderTopLeftRadius: '8px',
                    borderTopRightRadius: '8px',
                }}>
                <div className={Styles.datepicker}>
                    <div className={Styles.btns}>
                        <div className={Styles.cancel} onClick={() => cancel()}>取消</div>
                        <div className={Styles.enter} onClick={() => enter()}>确认</div>
                    </div>
                    <div className={Styles.tabs}>
                        {!onlyEndTime && <>
                            <div className={`${Styles.tabItem} ${tabs == 1 ? Styles.active : ''}`} onClick={() => clickTabs(1)}>{formatTime(time1)}</div>
                            <div className={Styles.tillNow}>至</div>
                        </>}
                        <div className={`${Styles.tabItem} ${tabs == 2 ? Styles.active : ''}`} onClick={() => clickTabs(2)}>{formatTime(time2)}</div>
                    </div>
                    {tabs == 1 && <DatePickerView
                        precision='month'
                        renderLabel={(type, data) => labelRenderer(type, data)}
                        defaultValue={time1}
                        value={time1}
                        min={min}
                        max={max}
                        filter={dateFilter1}
                        onChange={(e) => changeTime(e, 'startTime')} />}
                    {tabs == 2 && <DatePickerView
                        precision='month'
                        renderLabel={(type, data) => labelRenderer(type, data)}
                        defaultValue={time2}
                        value={time2}
                        min={min}
                        max={max}
                        filter={dateFilter2}
                        onChange={(e) => changeTime(e, 'endTime')} />}
                </div>
            </Popup>
        </>
    )
});